<template>
  <div class="home-container">
    <div class="home-item1">
      <!-- 左侧分类和右侧图片区域 -->
      <div style="display: flex; ">
        <!-- 左侧分类 -->
        <div class="left-container">
          <template v-for="(item, index) in industriesAndExams" :key="index">
            <div class="idustry-container">{{ item.name }}</div>
            <div class="exam-container">
              <div class="exam-item" @click="clickExam(Item,index,Index)" v-for="(Item, Index) in item.children"
                   :key="Index">
                {{ Item.name }}
              </div>
            </div>
          </template>
        </div>

        <!-- 右侧图片区域 -->
        <div class="right-img-container">
          <img :src="banner" alt="中震网校" class="banner-img" style="max-width: 100%; max-height: 100%;">
        </div>
      </div>

      <!-- 底部卡片区域 -->
      <div class="top-items-container">
        <div class="top-item-container" v-for="(item,index) in resourcesTypes" :key="index"
             @click="clickItem(item,index)">
          <img class="top-item-container-img" :src="item.img" alt="课程图标">
          <div class="icon-right-text">
            <div class="icon-right-text1">{{ item.name }}</div>
            <div class="icon-right-text2">{{ item.text }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="home-item2">
      <div>
        <div class="topic-container">
          <div>
            <div>
            </div>
          </div>
          <div class="topic-text">
            直播预告
          </div>
        </div>
      </div>

      <div class="home-item2-content">
        <el-scrollbar class="live-cards-container">
          <div class="live-card" v-for="(item,index) in liveList" :key="index">
            <div class="live-time1">{{ item.liveDate }}</div>
            <div class="teacher-info">
              <div class="tip">
                {{ item.freeFlag ? '免费' : '付费' }}
              </div>
              <img class="teacher-img" :src="TeacherImg" alt="">
              <p class="live-title-text">{{ item.title }}</p>

              <p class="teacher-and-position">
                <span class="live-teacher">{{ item.teacherName }}</span>
                <span class="teacher-position">中级经济师</span>
              </p>
            </div>
            <div class="bottom-info">
              <div class="live-time-text">
                <!-- <span class="live-time-text1">04/10</span> -->
                <span class="live-time-text2">{{ item.startTime }} - {{ item.endTime }}</span>
              </div>
              <el-button type="primary" @click="goAppointment(item)">
                立即预约
              </el-button>
            </div>
          </div>

        </el-scrollbar>
        <div
            class="the-a">
          <div
              class="the-aa">
            <div class="the-ab">
              <span>2025年考试日历</span>
            </div>
            <div class="the-ac">
              <div class="the-aca">
                <div class="the-acb"><span>报名</span><span>考试时间</span></div>
                <el-scrollbar height="160px">
                  <div v-for="(iiii,index111) in calendarList" :key="index111">
                    <div class="the-acc the-acb" v-for="(jjj,index222) in iiii" :key="index222"><span>{{
                        jjj.examName
                      }}</span><span>{{ jjj.examDate }}</span></div>
                  </div>
                </el-scrollbar>
              </div>
            </div>
          </div>
        </div>
      </div>


    </div>


    <div class="home-item3" v-for="(item,index) in industriesAndExams" :key="index" :id="'industry'+index">
      <div class="topic-header-container">
        <div class="topic-container">
          <div>
            <div>
            </div>
          </div>
          <div class="topic-text">
            {{ item.name }}
          </div>
        </div>

        <el-scrollbar class="exams1">
          <span @click="toggleIndex(item,j)" class="my-scroll-flex-text1" :class="{active:item.activeIndex==j}"
                v-for="(i,j) in item.children" :key="i.id">{{ i.name }}</span>
        </el-scrollbar>

      </div>
      <div class="grid">
        <div class="grid-left">
          <div class="a radius-12">
            <img v-if="item.children" :src="item.children[item.activeIndex].cover">
          </div>

          <div v-if="item.children" v-for="(item1,index1) in item.children[item.activeIndex].children1" :key="index1"
               class="b radius-12">
            <div v-if="item1">
              <div class="top-left-tip" v-if="item1.price==0">
                <span>体验课</span>
              </div>
              <div class="top-left-tip" v-else>
                <span>系统课</span>
              </div>
              <div @click="seeMore(item,index)" class="top-right-tip"
                   v-if="index1==item.children[item.activeIndex].children1.length-1">
                <span>更多 ></span>
              </div>
              <p class="class-name">{{ item1.name }}</p>
              <p class="class-info">
                <img :src="item1.cover">
              </p>
              <!--                <div class="teachers">-->
              <!--                  <div class="teacher-name-and-img">-->
              <!--                    <img class="teacher-img1"/>-->
              <!--                    <span>某老师</span>-->
              <!--                  </div>-->
              <!--                </div>-->
              <div>
                <el-tag v-for="(item2,index2) in item1.tagNameList" :key="index2" type="primary">{{ item2 }}</el-tag>
              </div>
              <div class="price-and-btn">
                <div><span class="unit">￥</span><span class="price">{{ item1.price / 100 }}</span></div>
                <el-button type="primary" round @click="goToPackage(item,item1)">立即领取</el-button>
              </div>
            </div>
            <img v-else src="@/assets/images/empty2.png" class="empty-img">
          </div>


        </div>
        <div class="grid-right">
          <div class="c radius-12">
            <div class="calendar-icon">
              <img src="@/assets/images/calendar.png" alt="" class="calendar-icon-png">
            </div>
            <div class="calendar-text" v-if="item.children">
              距2025{{ item.children[item.activeIndex].name }}考试还有
            </div>
            <div class="num-text-container">
              <div v-if="item.children&&item.children[item.activeIndex].countDown" class="num-one"
                   v-for="(iii,jjj) in (item.children[item.activeIndex].countDown.toString()).split('')"
                   :key="jjj">{{ iii }}
              </div>
              <span>天</span>
            </div>
            <div class="custom-calendar">
              <el-calendar ref="calendar">
                <template #header="{ date }">
                  <div class="my-calendar-header">
                    <div class="calendar-icon-container" @click="selectDate(index,'prev-month')">
                      <el-icon :size="22">
                        <ArrowLeft/>
                      </el-icon>
                    </div>
                    <span>
                 {{ date }}
                </span>
                    <div class="calendar-icon-container" @click="selectDate(index,'next-month')">
                      <el-icon :size="22">
                        <ArrowRight/>
                      </el-icon>
                    </div>
                  </div>
                </template>
                <template #date-cell="{ data }">
                  <p :class="[data.isSelected ? 'is-selected' : '',getEventClass(data)]" @click="showTips(index,data)">
                    {{ data.day.split('-')[2] }}
                  </p>
                </template>

              </el-calendar>
            </div>
          </div>
          <div class="g radius-12">
            <div class="exam-text" v-if="item.children">
              {{ item.children[item.activeIndex].name }}
            </div>
            <div class="exam-flex">
              <div class="exam-icon-container" v-for="(optionItem,ii) in option1"
                   @click="goToPractice(item,optionItem,ii)">
                <div class="icon-container" :class="'color'+ii">
                  <img :src="optionItem.img" alt="" class="exam-icon-img">
                </div>

                <span>{{ optionItem.name }}</span>
              </div>

            </div>
          </div>
        </div>


      </div>
    </div>
    <div class="home-item4">
      <div class="topic-header-container">
        <div class="topic-container">
          <div>
            <div>
            </div>
          </div>
          <div class="topic-text">
            高校老师
          </div>
        </div>
      </div>
      <div class="swiper-container">
        <swiper :modules="[Autoplay,Navigation]" :loop="true"
                :navigation="true" :autoplay="{ delay: 2500, disableOnInteraction: false }" :slides-per-view="4"
                :space-between="50" @swiper="onSwiper" @slideChange="onSlideChange">
          <swiper-slide v-for="(item,index) in teachers" :key="index">
            <div class="teacher-card" @click="goToTeacherDetail(item)">
              <img :src="item.teacherImg" alt="" class="teacher-img2">
              <div class="teacher-bottom-box">
                <div class="teacher-name1">{{ item.teacherName }}</div>
                <div class="teacher-introduce">{{ item.introduce }}</div>
              </div>
            </div>
          </swiper-slide>
        </swiper>
      </div>
    </div>
    <div class="home-item5">
      <div class="topic-header-container">
        <div class="topic-container">
          <div>
            <div>
            </div>
          </div>
          <div class="topic-text">
            精品题库
          </div>
        </div>
      </div>
      <div class="question-bank">
        <div class="question-items-container">
          <div class="question-item">
            <img src="" alt="" class="question-item-img">
            <p class="question-item-text1">每日一练</p>
            <p class="question-item-text2">每天进步一点点</p>
          </div>
          <div class="question-item">
            <img src="" alt="" class="question-item-img">
            <p class="question-item-text1">章节练习</p>
            <p class="question-item-text2">章节专项突破</p>
          </div>
          <div class="question-item">
            <img src="" alt="" class="question-item-img">
            <p class="question-item-text1">模拟考场</p>
            <p class="question-item-text2">模考题免费做</p>
          </div>
          <div class="question-item">
            <img src="" alt="" class="question-item-img">
            <p class="question-item-text1">精选试题</p>
            <p class="question-item-text2">省时高效精选</p>
          </div>
          <div class="question-item">
            <img src="" alt="" class="question-item-img">
            <p class="question-item-text1">历年真题</p>
            <p class="question-item-text2">真题实战演练</p>
          </div>
        </div>
        <div class="btn-container">
          <el-button type="primary" round class="aaaa" @click="goToBuyCenter">立即领取</el-button>
        </div>
      </div>
    </div>
    <div class="home-item6">
      <div class="topic-header-container">
        <div class="topic-container">
          <div>
            <div>
            </div>
          </div>
          <div class="topic-text">
            资料下载
          </div>
        </div>
      </div>

      <div class="container1">
        <el-scrollbar>
          <div class="resource-container">
            <div class="resource-one" v-for="(item,index) in freeMaterial" :key="index">
              <div class="resource-icon-complex">
                <span class="resource-one-title"></span>
                <img src="@/assets/images/pdf-img.png" alt="" class="pdf-img">
              </div>
              <div class="download-area" @click="downloadFile(item)">
                <span class="resource-text" :title="item.title">{{ item.title }}</span>
                <el-icon :color="'#409eff'" :size="16">
                  <Download/>
                </el-icon>
              </div>
            </div>
          </div>
        </el-scrollbar>

      </div>
    </div>
    <div class="home-item7">
      <div class="topic-header-container">
        <div class="topic-container">
          <div>
            <div>
            </div>
          </div>
          <div class="topic-text">
            专业服务
          </div>
        </div>
      </div>
      <div class="ask-container">
        <div class="ask-item" @click="goWeixin">
          <img src="@/assets/images/help.png" alt="" class="ask-icon">
          <span class="ask-text1">私教助学</span>
          <span class="ask-text2">专门针对重难点，私教老师直播讲解及答疑</span>
        </div>

      </div>
    </div>
    <el-drawer v-model="draw1" direction="rtl" size="70%">
      <el-scrollbar height="600">
        <div class="grid-draw">
          <div v-for="(item,index) in moreList" :key="index" class="b radius-12">
            <div v-if="item">
              <div class="top-left-tip" v-if="item.price==0">
                <span>体验课</span>
              </div>
              <div class="top-left-tip" v-else>
                <span>系统课</span>
              </div>

              <p class="class-name">{{ item.name }}</p>
              <p class="class-info">
                <img :src="item.cover">
              </p>
              <div>
                <el-tag v-for="(item2,index2) in item.tagNameList" :key="index2" type="primary">{{ item2 }}</el-tag>
              </div>
              <div class="price-and-btn">
                <div><span class="unit">￥</span><span class="price">{{ item.price / 100 }}</span></div>
                <el-button type="primary" round @click="goToPackage(industriesAndExams[seeMoreIndustryIndex],item)">
                  立即领取
                </el-button>
              </div>
            </div>
            <img v-else src="@/assets/images/empty2.png" class="empty-img">
          </div>
        </div>
      </el-scrollbar>
    </el-drawer>
  </div>
</template>

<script setup>
import {Swiper, SwiperSlide} from 'swiper/vue';
import {Autoplay} from 'swiper/modules';
import 'swiper/css';
import TeacherImg from '@/assets/images/范宇城.png';
import {Navigation} from "swiper/modules";
import defaultBackground from '@/assets/images/background2.png'
import ListApis from "@/apis/list.js";
import HomeApis from "@/apis/home.js"
import VideoApis from "@/apis/video.js"
import img1 from '@/assets/images/icon1.png';
import img2 from '@/assets/images/icon2.png';
import img3 from '@/assets/images/icon3.png';
import MaterialApis from "@/apis/material.js";
import {ArrowLeft, ArrowRight, Download} from '@element-plus/icons-vue'
import config from '@/config/index.js'


import {ref} from 'vue';
import videoApis from "@/apis/video.js";
// import index from "@chenfengyuan/vue-countdown";
import {ElMessage} from "element-plus";
import {useRouter, useRoute} from "vue-router";
import ziliao_icon from "@/assets/images/ziliao_icon.png"
import tiku_icon from "@/assets/images/tiku_icon.png"

const router = useRouter()
const route = useRoute()
const industries = ['jiangonglei', 'caikuailei', 'zhicheng']
const banner = ref(defaultBackground)
const liveList = ref([])
const industriesAndExams = ref([])
const haveInitialized = ref(false)

const resourcesTypes = [{
  img: img1,
  name: '课程',
  text: '大数据智能学习系统'
}, {
  img: img2,
  name: '题库',
  text: '智能学习平台、高效通关'
}, {
  img: img3,
  name: '资料',
  text: '《蓝宝典》《黄金考点》现货售卖！'
}]

const option1 = [{name: '精品题库', img: tiku_icon}, {name: '备考资料', img: ziliao_icon}]
const freeMaterial = ref([])
// 考试id和考试时间组合唯一
const calendarList = ref({})
const calendar = ref(null)
const teachers = ref([])
const draw1 = ref(false)
// 更多套餐
const moreList = ref([])
const seeMoreIndustryIndex = ref(0)

function onSwiper() {

}

function onSlideChange() {
}

function seeMore(item, index) {
  draw1.value = true
  seeMoreIndustryIndex.value = index
  moreList.value = item.children[item.activeIndex].children
}

function goToBuyCenter() {
  router.push('/buyCenter/index#buyCenter-content')
}

function goWeixin() {
  window.open("https://work.weixin.qq.com/kfid/kfc4d5c47ec0d5a0db2", '_blank')
}

function downloadFile(item) {

  fetch(config.prefix_image + item.attachmentInfos[0].path, {
    method: 'GET',
  })
      .then(response => response.blob())
      .then(blob => {
        // 创建一个虚拟的链接元素，模拟点击下载
        const link = document.createElement('a');
        link.style.display = 'none';
        const url = window.URL.createObjectURL(blob);
        link.href = url;
        link.download = item.attachmentInfos[0].name;
        document.body.appendChild(link);

        // // 模拟点击
        link.click();
        // // 移除虚拟链接元素
        document.body.removeChild(link);
        window.URL.revokeObjectURL(url)
      })
}

function getIndustries() {
  return ListApis.industryList()
}

function goToPractice(item, optionItem, i) {
  if ("精品题库" == optionItem.name) {
    router.push({
      path: '/study/bank/index',
      query: {
        industryId: item.id,
        examId: item.children[item.activeIndex].id
      }
    })
  } else if ("备考资料" == optionItem.name) {
    router.push({
      path: '/study/material/index',
      query: {
        industryId: item.id,
        examId: item.children[item.activeIndex].id
      }
    })
  }
}

// 预约，定时短信通知，我们将在开播前以短信的形式通知您！
// 手机号：173****7546
function getLastDate(examId) {
  return HomeApis.latestDate({
    params: {
      examId
    }
  })
}

function goAppointment(item) {
// @GetMapping("/haveAppoint")
  VideoApis.haveAppoint({
    params: {
      liveId: item.id
    }
  }).then(res => {
    if (res.data) {
      ElMessage({
        message: '您已预约过该场直播',
        type: 'warning',
      })
      return
    } else {
      router.push({
        path: '/live/appointment/index',
        query: {
          id: item.id,
          categoryId: item.categoryId
        }
      })
    }
  }).catch(err => {
    router.push({
      path: '/live/appointment/index',
      query: {
        id: item.id
      }
    })
  })

}

function goToTeacherDetail(item) {

}

function selectDate(index, val) {
  if (!calendar.value) return
  calendar.value[index].selectDate(val)
  const selectedDay = calendar.value[index].selectedDay
  //
  // $M,$y
  // 先判断是否请求过
  if ((selectedDay.$M + 1) in calendarList.value) {
    return;
  }
  if (val == 'next-month') {
    HomeApis.getCalendarList({
      params: {
        year: selectedDay.$y,
        month: selectedDay.$M + 1,
      }
    }).then(res => {
      calendarList.value[selectedDay.$M + 1] = res.data
    })
  }
}

function getEventClass(data) {
  // 遍历当前日历，有没有这个日期标记
  const month = Number(data.day.split('-')[1])
  if (month in calendarList.value) {
    let index = calendarList.value[month].findIndex(e => {
      // examDate
      return data.day == e.examDate
    })
    return index > -1 ? 'important' : ''
  } else {
    return ''
  }
}

function showTips(index, data) {
  const month = Number(data.day.split('-')[1])
  if (month in calendarList.value) {
    let index = calendarList.value[month].findIndex(e => {
      // examDate
      return data.day == e.examDate
    })
    if (index > -1) {
      ElMessage({
        message: calendarList.value[month][index].examName + '将于这天考试',
        type: 'warning',
        duration: 2000,
      })
    }
  }
}

function toggleIndex(item, j) {
  if (item.activeIndex == j) return;
  item.activeIndex = j
  //   获取海报封面
  if (!item.children[item.activeIndex].cover) {
    ListApis.advertisementList({
      params: {
        industryId: item.id,
        examId: item.children[item.activeIndex].id
      }
    }).then(res => {
      item.children[item.activeIndex].cover = config.prefix_image + res.data[0].cover
    })
  }

//   如果有children直接取，没有就请求
  if (item.children[item.activeIndex].children && item.children[item.activeIndex].children.length > 0) {

  } else {
    // 获取套餐
    ListApis.packageList({examId: item.children[item.activeIndex].id}).then(res1 => {

      res1.data.forEach((item1, index) => {
        item1.cover = item1.cover || '/测试用的图片/2.jpg'
      })

      item.children[item.activeIndex].children = res1.data
      if (res1.data.length >= 4) {
        item.children[item.activeIndex].children1 = res1.data.slice(0, 4)
      } else {
        let arr = new Array(4 - res1.data.length);
        arr.fill(null)
        item.children[item.activeIndex].children1 = [...res1.data, ...arr]
      }

    })
  }
  if (!item.children[item.activeIndex].countDown) {
    //   显示剩余考试时间
    getLastDate(item.children[item.activeIndex].id).then(res3 => {
      item.children[item.activeIndex].countDown = getCountDown(res3.data.examDate)
    })
  }

}

function getExams(industryId) {
  return ListApis.examByIndustry({
    params: {
      size: 1000,
      industryId,
    },
  })
}

function goToPackage(item, item1) {
  router.push({
    path: '/buyCenter/package/index',
    query: {
      packageId: item1.id,
      industryId: item.id,
      examId: item.children[item.activeIndex].id,
      ...item1
    }
  })

}

function clickExam(Item, index, Index) {
//   缓存，请求设置选中科目,跳转
//   router.push({
//     path: '/exam',
//     query: {
//       id: Item.id,
//       index: index,
//       IndustryIndex: Index
//     }
//   })

  toggleIndex(industriesAndExams.value[index], Index)
  // industriesAndExams.value[index].activeIndex = Index;
  // router.replace跳转锚点有问题

  // router.replace({
  //   path: route.path,
  //
  //   hash: '#industry2'
  // })


  // const htmlAnchorElement = document.createElement('a');
  // htmlAnchorElement.href = "/#industry" + index
  // htmlAnchorElement.target = '_self'
  // document.body.appendChild(htmlAnchorElement)
  // htmlAnchorElement.click()
  // htmlAnchorElement.remove()

  window.location.hash = "#industry" + index


}

async function init() {
  // 获取老师
  HomeApis.teacherList({
    params: {
      // industryId:'',
      current: 1,
      size: 10
    }
  }).then(res => {
    teachers.value = res.data.records
  })
  //   获取考试日历
  let now = new Date();
  HomeApis.getCalendarList({
    params: {
      // examId: 36,
      // industryId: 'caikuailei',
      year: now.getFullYear(),
      month: now.getMonth() + 1,
    }
  }).then(res => {
    calendarList.value[now.getMonth() + 1] = res.data
  })
  HomeApis.bannerList({
    positionCode: 'PC_INDEX_TOP_ADB'
  }).then(res => {
    banner.value = config.prefix_image + res.data[0].cover
  })
  getFreeMaterial()
  getLiveList()
  const industryRes = await getIndustries();
  industriesAndExams.value = industryRes.data.filter(item => industries.includes(item.id));
//   获取考试
  let promiseArr = []
  industriesAndExams.value.forEach((item) => {

    promiseArr.push(getExams(item.id).then(async res => {
      item.children = res.data
      item.activeIndex = 0
      //   获取海报封面
      ListApis.advertisementList({
        params: {
          industryId: item.id,
          examId: res.data[0].id
        }
      }).then(res => {
        item.children[item.activeIndex].cover = config.prefix_image + res.data[0].cover
      })
      //   获取套餐 /exam/package/list-by-exam
      const res1 = await ListApis.packageList({examId: item.children[item.activeIndex].id});
      item.children[item.activeIndex].children = res1.data

      res1.data.forEach((item1, index) => {
        item1.cover = item1.cover || '/测试用的图片/2.jpg'
      })

      if (res1.data.length >= 4) {
        item.children[item.activeIndex].children1 = res1.data.slice(0, 4)
      } else {
        let arr = new Array(4 - res1.data.length);
        arr.fill(null)
        item.children[item.activeIndex].children1 = [...res1.data, ...arr]
      }

      // examDate
      const res3 = await getLastDate(item.children[item.activeIndex].id)
      item.children[item.activeIndex].countDown = getCountDown(res3.data.examDate)
    }))
  })

  Promise.all(promiseArr).then(res4 => {
    haveInitialized.value = true


  })
}

function getCountDown(date) {
  if (!date) return '---';
  const oneDayTime = 1000 * 60 * 60 * 24
  const time = new Date(date).getTime()
  // 以东八区即8点为0点
  let dates = new Date();
  dates.setHours(8)
  const now = dates.getTime()
  return Math.floor((time - now) / oneDayTime)
}

function getFreeMaterial() {
  MaterialApis.indexList({
    params: {
      type: 1,
      num: 10,
      // examId:''
    }
  }).then(res => {
    freeMaterial.value = res.data.records || []
  })
}

function getLiveList() {
  VideoApis.videoList({
    params: {}
  }).then(res => {
    if (res.data) {
      liveList.value = res.data.records || []
    }
  })

}

function clickItem(item, index) {
  if (index == 2) {
    router.push({
      path: '/study/material/index',

    })
  } else if (index == 1) {
    router.push({
      path: '/study/bank/index',
    })
  } else if (index == 0) {
    router.push({
      path: '/study/video/index',
    })
  }
}

init()


const stopHaveInitialized = watch(haveInitialized, (val) => {
  if (val) {

    if (route.query.industryIndex && route.query.examIndex) {
      nextTick(() => {
        // console.log(document.getElementById('industry'+route.query.industryIndex))
        // window.location.hash = '#industry'+route.query.industryIndex;
        clickExam(null, Number(route.query.industryIndex), Number(route.query.examIndex))

      })

    }
    stopHaveInitialized()
  }

})
</script>

<style scoped>
/* 添加必要的样式 */

@media screen and (min-width: 1400px){
  .home-container{
    width: 1400px;
  }
}
.home-container {
  padding-top: 16px;
  
  margin: 0 auto;
  padding-bottom: 16px;
}

.home-item1 {
  background: white;
  box-shadow: 0px 3px 20px rgba(138, 149, 158, 0.12);
  border-radius: 12px
}

.top-item-container-img {
  width: 63px;
  height: 63px;
}

.icon-right-text {
  display: flex;
  flex-direction: column;
  justify-content: start;
  padding: 10px;
  align-items: start;
}

.icon-right-text1 {
  font-size: 16px;
  font-weight: bold;
  margin-top: 5px;
}

.icon-right-text2 {
  color: #888;
  font-size: 14px;
  margin-top: 5px;
}

.top-item-container {
  align-items: center;
  display: flex;
  cursor: pointer;
}

.exam-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  /* justify-content: flex-start; */
}

.exam-item {
  flex: 1 1 100px;
  text-align: left;
  cursor: pointer;
}

.exam-item:hover {
  color: #00bcd4;
}

.idustry-container {
  font-size: 17px;
  font-weight: bold;
  margin-top: 20px;
  margin-bottom: 10px;
}

.left-container {
  display: flex;
  flex-direction: column;
  width: 300px;
  padding: 20px;
}

.right-img-container {
  flex: 1;

}

.top-items-container {
  display: flex;
  justify-content: space-between;
  padding: 20px;
}

.home-item2 {
  height: 324.70px;
  position: relative;
  margin-top: 30px;
}

.topic-container {
  justify-content: flex-start;
  align-items: flex-end;
  gap: 5px;
  display: inline-flex;
  padding: 10px 0;
}

.topic-text {
  /* justify-content: center;
  display: flex;
  flex-direction: column; */
  color: #333333;
  font-size: 24px;
  font-weight: 700;
  line-height: 32px;
  word-wrap: break-word
}

.live-cards-container {
  margin-top: 16px;
  width: 1048px;
  height: 235px;
  background: white;
  border-radius: 12px;

  /* justify-content: center;
  align-items: center;
  display: flex; */


  /* overflow-x: scroll; */
  flex-flow: row;
  /* word-wrap: none;
  word-break: keep-all; */
  white-space: nowrap;
}

.live-card {
  flex: 1;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  width: 350px;
  align-items: center;
  white-space: wrap;
  padding: 16px 0;
}

.live-time1 {
  height: 32px;
  padding-right: 16px;
  padding-left: 16px;
  background: #F3F5F6;
  border-radius: 16px;
  line-height: 32px;
  text-align: center;
}

.live-card .teacher-info {
  margin-top: 16px;
  width: 330px;
  background: linear-gradient(to bottom right, #E6F2FF, #C3E4FC);
  /* background-image: linear-gradient(30 deg,#E6F2FF 0%, #C3E4FC 100%); */
  border-radius: 10px;
  position: relative;
  box-sizing: border-box;
  padding: 18px 16px;

}

.teacher-info .tip {
  border-radius: 10px;
  position: absolute;
  top: 0;
  left: 0;
  background: #F3F3F3;
  color: #E13B29;
  padding: 2px 5px;
}

.teacher-img {
  width: 80px;
  height: 80px;
  border-radius: 40px;
  float: left;
  margin-right: 8px;
}

.live-title-text {
  color: #000;

  font-size: 14px;
  line-height: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 20px;

}

.teacher-and-position {
  margin-top: 16px;
  display: flex;
  justify-content: space-between;
}

.live-teacher,
.teacher-position {
  font-weight: 400;
  vertical-align: middle;
}

.bottom-info {
  margin-top: 16px;
  padding: 0 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-self: stretch
}

.live-time-text {
}

.live-time-text1 {
  color: #333;
  font-size: 20px;
  font-weight: 700;
}

.live-time-text2 {
  margin-left: 10px;
  color: #333;
  font-size: 14px;
  font-weight: 400;
}

.topic-header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.exams1 {
  display: inline-block;
  width: 1080px;
  height: 35px;
  text-align: right;
}

.exams1 .btn {
  margin: 0 16px;
}

.grid {
  width: 1400px;
  height: 620px;
  display: grid;
  row-gap: 20px;
  column-gap: 20px;
  grid-template-columns: 1045px 335px;
  /**grid-template-rows: 300px 160px 120px;*/
}

.grid-left {
  display: grid;
  row-gap: 20px;
  column-gap: 20px;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
}

.grid-right {
  display: grid;
  row-gap: 20px;
  grid-template-columns: repeat(1, 1fr);
  grid-template-rows: 480px 120px;
}

.d,
.e,
.f,
.b {
  width: 335px;
  height: 300px;
  background: white;
}

.a {
  width: 690px;
  height: 300px;
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 2;
  padding: 0 !important;
}

.a img {
  width: 100%;
  height: 100%;
}

.c.radius-12 {
  width: 335px;
  height: 480px;
  background: white;
  background: linear-gradient(187deg, #D7E1FF 2.72%, #FFF 123.83%);
  padding-top: 15px;
}

.radius-12 {
  border-radius: 12px;
  box-shadow: 1px 0px 5px rgba(0, 0, 0, 0.05);
  box-sizing: border-box;
  position: relative;
  padding: 50px 16px 0px 16px;
}


.d {
  grid-row-start: 2;
  grid-row-end: 4;
}

.e {
  grid-row-start: 2;
  grid-row-end: 4;
}

.f {
  grid-row-start: 2;
  grid-row-end: 4;
}

.radius-12.g {
  background: white;
  padding-top: 10px;
}

.top-left-tip {
  position: absolute;
  top: 0;
  left: 0;
  background: #E8EFFF;
  color: #3C6CFF;

}

.top-right-tip {
  position: absolute;
  top: 0;
  right: 0;
  color: black;
  cursor: pointer;
}

.class-name {
  color: #333;
  font-size: 17.438px;
  font-weight: 700;
  line-height: 25px;
}

.class-info {
  color: #888;
  font-size: 13px;
  font-weight: 400;
  line-height: 20px;
  word-break: break-all;
  min-height: 100px;
}

.class-info img {
  height: 100px;
  width: 180px;
}

.teachers {
  padding: 20px 0;
}

.teacher-name-and-img {
  width: 60px;
  height: 80px;
  display: inline-block;
  margin-right: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.teacher-img1 {
  outline: 1px solid red;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  margin: 0 auto;
}

.price-and-btn {
  margin-top: 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.price-and-btn .tabs {
  flex: 1;
  padding-right: 16px;
}

.price-and-btn .tabs .tab {
  padding: 3px;
  background-image: linear-gradient(90deg, #CDD9FF 0%, #E9F6FF 100%);
}

.unit, .price {
  color: red;
}

.unit {
  font-size: 12px;
}

.price {
  font-weight: 400;
  font-size: 24px;
}

.receive {
  align-self: flex-end;
}

.calendar-icon {
  position: absolute;
  right: -18px;
  top: -18px;
}

.calendar-icon-png {
  width: 126px;
}

.calendar-text {
  padding: 0 16px 10px;
  color: #333;
  font-size: 21px;
  font-weight: 700;
}

.num-text-container {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  width: 220px;
  margin: 0 auto;
}

.num-one {
  width: 55px;
  height: 55px;
  border-radius: 10px;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #3C6CFF;
  font-size: 28px;
  font-weight: 700;
}

.custom-calendar {
  margin-top: 10px;
  width: 303px;
  height: 320px;
}


::v-deep(.el-calendar) {
  width: 100%;
  height: 100%;
}


::v-deep(.el-calendar__header) {
  font-size: 18px;
  padding: 10px;
}


::v-deep(.el-calendar-table) {
  height: calc(100% - 50px);
}


::v-deep(.el-calendar-day) {
  height: 40px;

  text-align: center;
  border: 1px solid #ebeef5;
}

::v-deep(.el-calendar-day) {
  border: none;
}

::v-deep(.el-calendar-table td) {
  border: none;
}

::v-deep(.current.is-selected) {
  border-radius: 50%;
}

.important {
  color: red;
}

.exam-icon-img {
  width: 48px;
  height: 48px;
}

.exam-icon-container {
  display: flex;
  align-items: center;
  flex-direction: column;
  cursor: pointer;
}

.exam-icon-container .icon-container {
  width: 43px;
  height: 43px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.exam-icon-container .icon-container.color0{
  background: #FFF1F0 ;
}
.exam-icon-container .icon-container.color1{
  background: #E3FFFC ;
}

.exam-icon-container .icon-container img {
  width: 20px;
  height: 22px;
}

.exam-flex {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.exam-text {
  color: #000;
  text-align: center;
  font-size: 13px;
  font-weight: 400;
  margin-bottom: 10px;
}

.teacher-card {
  width: 260px;
  height: 291px;
  border-radius: 8px;
  background-image: url('@/assets/images/teacher-background.png');
  background-size: 260px auto;
  position: relative;
}

.teacher-img2 {
  position: absolute;
  top: 20px;
  left: 50%;
  width: 160px;
  transition: transform 0.5s;
  transform: translateX(-50%);
}

.teacher-bottom-box {
  position: absolute;
  width: 100%;
  height: 90px;
  bottom: 0;
  box-sizing: border-box;
  padding: 12px;
  background: #F4FAFF;
}

.teacher-name1 {
  color: #333;
  font-size: 17px;
  font-weight: 700;
}

.teacher-introduce {
  color: #555;
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
}

.swiper-container {
  background: white;
  padding: 16px;
  border-radius: 10px;
}

.question-bank {
  height: 233px;
  box-sizing: border-box;
  padding: 49px 54px 0;
  background: linear-gradient(to right, #DFF2FE, #C4E4FA);
  border-radius: 10px;

}

.question-items-container {
  border-radius: 8px;
  background: #FFFFFF;
  height: 114px;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

.question-item {
  width: 145px;
  height: 38px;
}

.question-item-img {
  margin-top: 2px;
  width: 34px;
  height: 34px;
  float: left;
}

.question-item-text1 {
  color: #333;
  font-size: 13px;
  font-weight: 400;
}

.question-item-text2 {
  color: #999;
  font-size: 12px;
  font-weight: 400;
}

.container1 {
  display: flex;
  padding: 9px 9px 16px 9px;
  box-sizing: border-box;
  align-items: start;
  border-radius: 12px;
  background: white;
}

.resource-container {
  display: flex;
  height: 257px;
  align-items: start;
}

.resource-one {
  display: flex;
  box-sizing: border-box;
  width: 154px;
  height: 170px;
  padding: 21px 13.81px 13px 13.8px;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}

.resource-text {
  margin-top: 18px;
  color: #555;
  font-size: 14px;
  font-weight: 400;
  display: inline-block;
  max-width: 80px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.resource-icon-complex {
  border-radius: 8px;

  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 1px 8px 0 5px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.resource-one-title {
  box-sizing: border-box;
  height: 24px;
  line-height: 24px;
  text-align: center;
  min-width: 106px;
  padding: 0px 27px;
  border-radius: 0px 0px 10px 10px;
  background: #E8EFFF;
}

.pdf-img {
  width: 126.39px;
  height: 136px;

}

.ask-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ask-item {
  display: flex;
  box-sizing: border-box;
  width: 337px;
  height: 242px;
  padding: 31px 17px 1px 17px;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
  border-radius: 10px;
  background: #FFF;
}

.ask-icon {
  width: 78px;
  height: 67px;
}

.ask-text1 {
  color: #333;
  font-size: 18px;
  font-weight: 700;
}

.ask-text2 {
  color: #888;
  font-size: 14px;
  font-weight: 400;
}

.banner-img {
  background-size: cover;
  width: 100%;
  height: 100%;
  border-radius: 10px;
}

.download-area {
  cursor: pointer;
}

.my-scroll-flex-text1 {
  padding: 5px 16px;
  cursor: pointer;
  color: #555;
  font-size: 14px;
  font-weight: 400;
  display: inline-block;
  border-radius: 20px;
  box-sizing: border-box;
  border: 1px solid transparent;
}

.my-scroll-flex-text1.active {
  box-sizing: border-box;
  color: #4065D6;
  border: 1px solid #4065D6;
}

.f .empty-img {
  width: 292px;
  height: 221px;
}

.btn-container {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
}

.aaaa {
  display: flex;
  width: 152px;
  height: 32px;
  padding: 0px 32.5px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.my-calendar-header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  font-weight: 400;
  padding: 0 5px;
}


.calendar-icon-container {
  width: 27px;
  height: 27px;
  background: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.home-item2-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.the-a {
  width: 335px;
  height: 268px;
  border-bottom-right-radius: 12px;
  border-bottom-left-radius: 12px;
}

.the-aa {
  width: 335px;
  height: 269px;
  background: linear-gradient(212deg, #C8DAFF 0%, #E7EFFF 94%);
  border-radius: 12px;
}

.the-ab {
  width: 165px;
  height: 35px;
  flex-shrink: 0;
  border-radius: 12px 0px 16px 0px;
  background: linear-gradient(102deg, rgba(47, 118, 233, 0.55) -7.45%, rgba(39, 107, 253, 0.34) 76.44%);

  line-height: 35px;
  text-align: center;
  color: #F3F5F6;
  font-size: 16.469px;
  font-weight: 700;
}

.the-ac {
  padding: 5px;
}

.the-aca {
  height: 213px;
  flex-shrink: 0;
  border-radius: 12px;
  background: #FFF;
  padding: 10px;
}

.the-acb {
  color: #555;
  text-align: center;
  font-size: 14px;
  font-weight: 400;

  padding: 12px 51.829px 10px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.the-acb span {
  flex: 1;
}

.the-acc {
  margin-top: 16px;
  border-radius: 4px;
  background: #FAFAFA;
}

.grid-draw {
  padding: 16px;
  background: #FAFAFA;
  display: grid;
  row-gap: 20px;
  column-gap: 20px;
  grid-template-columns: repeat(3, 335px);
  grid-auto-rows: 300px;
}
</style>
